<template>
<el-dialog append-to-body title="分配客资到酒店" :visible.sync="visible" custom-class="my-dialog">
    <div class="flex-main">
        <div class="dialog-left">
            <el-tree ref="departmentTree" :data="tree" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="defaultExpandedKeys" @node-click="clickTreeNode">
                <div class="custom-tree-node" slot-scope="{ node }">
                    <span class="fl">
                        <i class="el-icon-folder-opened" style="color: #2cadff; margin-right: 5px"></i>
                        <span>{{ node.label }}</span>
                    </span>
                </div>
            </el-tree>
        </div>

        <div class="dialog-main">
            <div class="dialog-main-head">
                <div class="left">
                    <el-form :inline="true" ref="form" :model="query" @submit.native.prevent>
                        <el-form-item>
                            <el-select v-model="query.status" placeholder="请选择在职状态" clearable>
                                <el-option label="在职" value="1"></el-option>
                                <el-option label="离职" value="0"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-input v-model="query.keyword" placeholder="姓名/昵称/电话" style="width: 200px" class="filter-item" size="small" clearable @clear="doSearch" />
                        </el-form-item>
                        <el-button class="filter-item" type="primary" icon="el-icon-search" native-type="submit" @click="doSearch">搜索</el-button>
                    </el-form>
                </div>
            </div>

            <div class="selected-group" v-if="selectedUser.length > 0">
                <div class="title">已选员工:</div>
                <div class="select-list">
                    <el-tag v-for="item in selectedUser" :key="item.id" closable @close="removeSelected(item, 'user')" class="tag">{{ item.realname }}</el-tag>
                </div>
            </div>

            <div class="selected-group" v-if="selectedHotel.length > 0">
                <div class="title">已选酒店:</div>
                <div class="select-list">
                    <el-tag v-for="item in selectedHotel" :key="item.id" closable @close="removeSelected(item, 'store')" class="tag">{{ item.title }}</el-tag>
                </div>
            </div>

            <el-table ref="tableView" v-loading="listLoading" :data="tableData" element-loading-text="Loading" border fit highlight-current-row @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">
                        {{ scope.row.realname }}
                    </template>
                </el-table-column>
                <el-table-column label="电话" width="160" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.mobile }}
                    </template>
                </el-table-column>

                <el-table-column label="昵称" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.nickname }}
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="status" label="在职状态" width="120">
                    <template slot-scope="scope">
                        <span>{{ scope.row.status > 0 ? "在职" : "离职" }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="dialog-main-foot">
                <!-- 分页 -->
                <pagination-view v-show="pagination.total > 0" :total="pagination.total" :page.sync="pagination.page" :limit.sync="pagination.limit" @getList="getTableData"></pagination-view>
            </div>
        </div>
    </div>
    <div slot="footer">
        <picker-view type="store" @change="changeStore" tips="请选择酒店" class="mr20"></picker-view>
        <el-button type="primary" @click="submit">分配</el-button>
        <!-- <el-button @click="visible = false">取 消</el-button> -->
    </div>
</el-dialog>
</template>

<script>
import {
    getTreeApi,
} from "@/api/ucenter/department";
import {
    getUserListApi
} from "@/api/ucenter/user";
import paginationView from "@/components/Pagination/pagination.vue";
import pickerView from "@/components/picker/select.vue";
import { s } from "stylus/lib/functions";

export default {
    components: {
        paginationView,
        pickerView
    },
    data() {
        return {
            visible: false,
            tree: [],
            defaultExpandedKeys: [],
            listLoading: false,
            query: {
                status: "1",
                keyword: "",
                department_id: ""
            },
            tableData: [],
            pagination: {
                total: 0,
                page: 1,
                limit: 15,
            },
            selectedRows: [],
            selectedUser: [], // 选中的用户id
            selectedHotel: [], // 选中的酒店id
        };
    },
    created() {
        this.getDptTree();
    },
    methods: {
        showDialog() {
            this.visible = true;
            this.selectedRows = [];
            this.store_id = "";
            this.$nextTick(() => {
                this.$refs['tableView'].clearSelection();
            })
        },
        closeDialog() {
            this.visible = false;
        },
        doSearch() {
            this.pagination = {
                total: 0,
                page: 1,
                limit: 15,
            };
            this.getTableData();
        },
        getTableData() {
            let params = Object.assign({}, this.query);
            params["pagination"] = this.pagination;

            this.listLoading = true;
            getUserListApi(params).then((res) => {
                if (res.code == 200) {
                    this.listLoading = false;
                    this.tableData = res.data.list;
                    this.pagination = res.data.pagination;
                }
            });
        },
        // 获取Tree数据
        getDptTree() {
            let that = this;
            getTreeApi().then((res) => {
                let tree = res.data.tree;
                that.tree = tree;
                that.defaultExpandedKeys = tree[0] ? [tree[0].id] : [];
            });
        },
        clickTreeNode(data, node) {
            this.nodeCurrent = data.id;
            this.query.department_id = data.id;
            this.getTableData()
        },
        handleSelectionChange(rows) {
            // this.selectedRows = rows;
            // rows 追加到已选员工列表，如果已存在则不追加
            rows.forEach(row => {
                if (!this.selectedUser.find(e => e.id == row.id)) {
                    this.selectedUser.push(row);
                }
            });
        },
        changeStore(store) {
            if (!store) {
                return;
            }
            // selectedHotel 追加到已选酒店列表，如果已存在则不追加
            if (!this.selectedHotel.find(e => e.id == store.id)) {
                this.selectedHotel.push(store);
            }
        },
        removeSelected(row, type) {
            // this.selectedRows = this.selectedRows.filter(e => e.id != row.id);
            if (type == "user") {
                this.selectedUser = this.selectedUser.filter(e => e.id != row.id);
            } else {
                this.selectedHotel = this.selectedHotel.filter(e => e.id != row.id);
            }
        },
        submit() {
            let selectedUserIds = this.selectedUser.map(e => e.id);
            let selectedHotelIds = this.selectedHotel.map(e => e.id);
            if (selectedUserIds.length == 0 && selectedHotelIds.length == 0) {
                this.$message.error("请选择员工或酒店");
                return
            }

            this.$confirm('确认进行分配?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit("submit", selectedUserIds, selectedHotelIds);
                this.closeDialog();
            });
        }
    },
};
</script>

<style lang="less">
.my-dialog {
    .el-dialog__body {
        padding: 0 20px;
    }

    .flex-main {
        display: flex;
        .dialog-left {
            flex: 0 20%;
            padding-right: 12px;
            border-right: 1px solid #dedede;
            max-height: 60vh;
            overflow: auto;
        }

        .dialog-main {
            padding-left: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            max-height: 60vh;
            overflow: auto;

            .dialog-main-header {
                flex: 0 50px;
            }

            .selected-group {
                flex: 0 30px;
                display: flex;
                flex-wrap: nowrap;
                margin-bottom: 12px;
                justify-items: center;

                .title {
                    flex: 0 5rem;
                    margin-top: 5px;
                }

                .select-list {
                    flex: 1;
                    display: flex;
                    flex-wrap: nowrap;
                    overflow: auto;

                    .el-tag {
                        margin: 5px;
                    }
                }

                // 滚动条样式
                &::-webkit-scrollbar {
                    width: 6px;
                    height: 1px;
                }

            }

            .table-wrapper {
                height: calc(60vh - 122px);
                overflow-y: auto;
            }

            .dialog-main-foot {
                margin-top: 12px;
            }
        }

    }
}
</style>
